<template>
	<view class="content">
		<image src="/static/my/rzbg.png" mode="widthFix"></image>
		<view class="xz">
			<view class="left">
				<input v-model="city" placeholder="请选择您所在的城市" disabled />
			</view>
			<view @click="getLocation" class="right">
				<text class="dw">一键定位</text>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn" @tap="handlerNext">
			<text>带车加入</text>
		</view>
	</view>
</template>

<script>
	import {mapKey} from "@/common/api";

  export default {
		data() {
			return {
				username: '',
				mobile: '',
				addr: '',
        city:'',
				detail_addr: '',
				ismr: false,
			}
		},
		methods: {
      //带车加入
      handlerNext(){
        if (!this.city) return uni.showToast({
          title:'请获取当前位置',
          icon:'none'
        });
       uni.redirectTo({
         url:'/pages/my/cllx?city='+this.city
       })
      },
      //获取定位
      getLocation() {
        let that = this
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true,
          success: function (res) {
            console.log('location', res)
            uni.setStorageSync('latitude', res.latitude);
            uni.setStorageSync('longitude', res.longitude);
            that.location = {
              latitude: res.latitude,

              longitude: res.longitude
            }
            // that.loadCity(res.latitude, res.longitude)
            /**
             *   :longitude="106.33"
             *            :latitude="29.35"
             */
            that.getUserLocation(res.latitude, res.longitude)
          },
          fail: function (err) {
            console.log(err)
            uni.showModal({
              title: '提示',
              content: '请检查定位服务是否打开',
            })
          }
        });
      },
      getUserLocation(latitude, longitude) {
        let locationObj = latitude + "," + longitude;//先拿到当前的需要转换位置的经纬度
        let url = "https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&poi_options=page_size=20;page_index=1";
        this.$jsonp(url, {
          key:mapKey, //腾讯地图key，自行申请,
          location: locationObj,
          output: 'jsonp'
        }).then((res) => {
          this.city = res.result.address_component.district || res.result.address_component.city
        }).catch((err) => {
          console.log(err);
        });
      },
			//跳转
			goNext(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		image{
			width: 100%;
		}
		.xz{
			margin-top: 60rpx;
			padding: 0 40rpx 20rpx;
			display: flex;
			border-bottom: 1rpx solid #E3E3E3;
			.left{
				padding-top: 10rpx;
				input{
					height: 50rpx;
					line-height: 50rpx;
				}
			}
			.right{
				margin-left: auto;
				.dw{
					display: inline-block;
					padding: 15rpx 70rpx;
					line-height: 40rpx;
					border-radius: 10rpx;
					background-color: #FFF5F4;
					color: #E36B6A;
					border: 1rpx solid #E36B6A;
					font-weight: 600;
				}
			}
		}
		.btn{
			margin: 50rpx auto 0;
			width: 630rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 20rpx;
			text-align: center;
			background-color: #895FFF;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			letter-spacing: 2rpx;
			color: #fff;
		}
	}
</style>
